<template>
  <div class="ratingselect">
    <div class="rating-type">
      <span class="block" :class="{active: filter === 2 }" @click="setFilters(2)">
        全部<span class="count">{{rating.length}}</span>
      </span>
      <span class="block" :class="{active: filter === 0 }" @click="setFilters(0)">
        推荐<span class="count">{{getRecommendLength}}</span>
      </span>
      <span class="block" :class="{active: filter === 1 }" @click="setFilters(1) ">
        吐槽<span class="count">{{getNotRecommendLength}}</span>
      </span>
    </div>
    <div class="switch" :class="{on : onlyText}" @click="toggleShow">
      <span class="iconfont icon-duigou"></span>
      <span class="text">只看有内容的评价</span>
    </div>
  </div>
</template>


<script>
	// 导入深拷贝依赖
	import _ from 'lodash'
	export default {
		data() {
			return {
				// 过滤条件
				filter: 2,
				// 只显示有文本的
				onlyText: true,
			}
		},
		created() {
		},
		methods: {
			setFilters(filterType) {
				this.filter = filterType
				this.$emit('filter', this.filter)
			},
			toggleShow () {
				this.onlyText = !this.onlyText
				this.$emit('onlyText', this.onlyText)
			}
		},
		computed: {
			// 计算出推荐的条数
			getRecommendLength() {
				let length = 0
				this.rating.forEach(item => {
					if(item.rateType === 0) {
						length += 1
					}
				})
				return length
			},
			// 计算出吐槽的条数
			getNotRecommendLength() {
				let length = 0
				this.rating.forEach(item => {
					if(item.rateType === 1) {
						length += 1
					}
				})
				return length
			}
			
		},
		props: {
			// 全部评论信息
			rating: {
				type: Array
			},
		}
	}
</script>

<style lang="less" scoped>
	.ratingselect{
		.rating-type{
			padding: 18px 0;
			margin: 0 18px;
			// border: 1px solid rgba(7, 17, 27, 0.1);
			font-size: 0;
			.block{
				display: inline-block;
				padding: 8px 12px;
				margin-right: 8px;
				line-height: 16px;
				border-radius: 1px;
				font-size: 12px;
				color: rgb(77, 85, 93);
				background: rgba(77, 85, 93, 0.2);
				&.active{
					background: #03A774;
					color: #fff;
				}
				.count{
					margin-left: 2px;
					font-size: 8px;
				}
			}
		}
		.switch{
			padding: 12px 18px;
			line-height: 24px;
			border-bottom: 1px solid rgba(7, 17, 27, 0.1);
			color: rgb(147, 153, 159);
			font-size: 0;
			&.on{
				.icon-duigou{
					color: #03A774;
				}
			}
			.icon-duigou{
				display: inline-block;
				vertical-align: top;
				margin-right: 4px;
				font-size: 24px;
			}
			.text{
				display: inline-block;
				vertical-align: top;
				font-size: 12px;
			}
		}
	}

</style>
